<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">

	<head>
		<!-- Meta Tags -->
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="author" content="wpoceans">

		<!-- Page Title -->
		<title>Varaus</title>

		<!-- Icon fonts -->
		<link href="${pageContext.request.contextPath}/css/themify-icons.css" rel="stylesheet">
		<link href="${pageContext.request.contextPath}/css/flaticon.css" rel="stylesheet">

		<!-- Bootstrap core CSS -->
		<link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">

		<!-- Plugins for this template -->
		<link href="${pageContext.request.contextPath}/css/animate.css" rel="stylesheet">
		<link href="${pageContext.request.contextPath}/css/owl.carousel.css" rel="stylesheet">
		<link href="${pageContext.request.contextPath}/css/owl.theme.css" rel="stylesheet">
		<link href="${pageContext.request.contextPath}/css/slick.css" rel="stylesheet">
		<link href="${pageContext.request.contextPath}/css/slick-theme.css" rel="stylesheet">
		<link href="${pageContext.request.contextPath}/css/odometer-theme-default.css" rel="stylesheet">
		<link href="${pageContext.request.contextPath}/css/owl.transitions.css" rel="stylesheet">
		<link href="${pageContext.request.contextPath}/css/jquery.fancybox.css" rel="stylesheet">
		<link href="${pageContext.request.contextPath}/css/magnific-popup.css" rel="stylesheet">
		<link href="${pageContext.request.contextPath}/css/nice-select.css" rel="stylesheet">
		<link href="${pageContext.request.contextPath}/css/bootstrap-datepicker.min.css" rel="stylesheet">

		<!-- Custom styles for this template -->
		<link href="${pageContext.request.contextPath}/css/style.css" rel="stylesheet">

		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

	</head>

	<body id="home">

		<!-- start page-wrapper -->
		<div class="page-wrapper">

			<!-- start preloader -->
			<div class="preloader">
				<div class="spinner">
					<div class="bounce1"></div>
					<div class="bounce2"></div>
					<div class="bounce3"></div>
				</div>
			</div>
			<!-- end preloader -->
			<!-- 头部开始 -->
			<header id="header">
				<div class="topbar">
					<div class="container-fluid">
						<div class="row">
							<div class="col col-md-6 col-sm-7 col-12">
								<div class="contact-intro">
									<ul>
										<li><i class="fi ti-location-pin"></i>28 Street, New York City, USA</li>
										<li><i class="fi flaticon-email"></i> varaus@gmail.com</li>
									</ul>
								</div>
							</div>
							<div class="col col-md-6 col-sm-5 col-12">
								<div class="contact-info">
									<ul>
										<li><a href="#"><i class="ti-facebook"></i></a></li>
										<li><a href="#"><i class="ti-twitter-alt"></i></a></li>
										<li><a href="#"><i class="ti-instagram"></i></a></li>
										<li><a href="#"><i class="ti-google"></i></a></li>
										<li><a class="theme-btn-s2" href="#">预约房间</a></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div> <!-- end topbar -->
				<div class="site-header header-style-1">
					<nav class="navigation navbar navbar-default">
						<div class="container-fluid">
							<div class="navbar-header">
								<button type="button" class="open-btn">
									<span class="sr-only">Toggle navigation</span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
								</button>
								<a class="navbar-brand" href="index.html"><img src="images/logo.png" alt=""></a>
							</div>
							<div id="navbar" class="navbar-collapse collapse navigation-holder">
								<button class="close-navbar"><i class="ti-close"></i></button>
								<ul class="nav navbar-nav">
									<li class="menu-item-has-children">
									<li><a href="${pageContext.request.contextPath}/index.jsp">首页</a></li>
									</li>
									<li class="menu-item-has-children">
									<li><a href="${pageContext.request.contextPath}/frontController/allRoom">全部房间</a></li>
									</li>
									<li class="menu-item-has-children">
									<li><a href="${pageContext.request.contextPath}/frontController/roomSingle">房间详情</a></li>
									</li>
									<li class="menu-item-has-children">
									<li><a href="${pageContext.request.contextPath}/frontController/service">酒店服务</a></li>
									</li>
								</ul>
							</div><!-- 导航栏结束 -->
							<div class="cart-search-contact">
								<div class="get-quote">
									<a href="#"><i class="fi flaticon-support-1"></i>Call : +0123-456-789</a>
								</div>
								<!-- 搜索部分开始 -->
								<c:if test="${sessionScope.user == null}">
									<div class="header-search-form-wrapper">
										<a href="${pageContext.request.contextPath}/userInfoController/login"><button class="theme-btn-s2">登录</button></a>
									</div>
									<div class="header-search-form-wrapper">
										<a href="${pageContext.request.contextPath}/userInfoController/login"><button class="theme-btn-s2">注册</button></a>
									</div>
								</c:if>
								<c:if test="${sessionScope.user != null}">
									<button class="theme-btn-s2">
										<!-- 这儿放头像 -->
										<!-- 默认头像 -->
										<c:if test="${sessionScope.user.userImg ==null}">
											<img id='uimg' src="#"/>
										</c:if>
										<!-- 自定义头像 -->
										<c:if test="${sessionScope.user.userImg !=null}">
											<img id='uimg'   src="${pageContext.request.contextPath }/DownLoadController/download/?filename=${sessionScope.user.userImg}" />
										</c:if>
									</button>
									<button class="theme-btn-s2"><h5 style="color: #FFFFFF">${sessionScope.user.userName}</h5></button>
									<a href="${pageContext.request.contextPath}/frontController/userCenter"><button class="theme-btn-s2">个人中心</button></a>
									<a href="${pageContext.request.contextPath}/userInfoController/exit"><button class="theme-btn-s2">退出</button></a>
								</c:if>
							</div>
						</div><!-- 个人中心结束 -->
					</nav>
				</div>
			</header>
			<!-- 头部结束 -->
			<!-- start page-title -->
			<section class="page-title">
				<div class="container">
					<div class="row">
						<div class="col col-xs-12">
							<h2>个人中心</h2>
							<p id="userId" style="display: none">${sessionScope.user.userId}</p>
							<ol class="breadcrumb">
								<li><a href="${pageContext.request.contextPath}index.jsp">主页</a></li>
								<li>欢迎使用</li>
							</ol>
						</div>
					</div>
					<!-- end row -->
				</div>
				<!-- end container -->
			</section>
			<!-- end page-title -->

			<!-- start service-single-section -->
			<section class="service-single-section section-padding">
				<div class="container">
					<div class="row">
						<div class="col col-md-8 col-md-push-4">
							<div class="service-sidebar">
								<div class="widget service-list-widget tab-content" id="myTabContent">
									<div class="tab-pane fade in active" id="myself">
										<form method="post" action="${pageContext.request.contextPath}/userInfoController/changeUserInfo?userId=${sessionScope.user.userId}"
											  enctype="multipart/form-data">
											<div class="col col-md-8 col-md-push-4">
												<div class="contact-content">

													<div class="contact-form">

														<div class="half-col">
															<lable>用户名:</lable>
															<input type="text" name="userName" id="fname" class="form-control" value="${sessionScope.user.userName}" >
														</div>
														<div class="half-col">
															<lable>姓名:</lable>
															<input type="text" name="userRealName" id="lname" class="form-control" value="${sessionScope.user.userRealName}" >
														</div>
														<div class="half-col">
															<lable>手机号:</lable>
															<input type="text" name="userTel" id="subject" class="form-control" value="${sessionScope.user.userTel}">
														</div>
														<div class="half-col">
															<lable>身份证号:</lable>
															<input type="text" name="userRealID" id="subject" class="form-control" value="${sessionScope.user.userRealID}">
														</div>

														<div class="submit-btn-wrapper">
															<br />
															<input type="submit" class="btn btn-success btn-lg btn-block" name="" id="" value="修改" />

														</div>


													</div>
												</div>

											</div>
											<div class="col col-md-4 col-md-pull-8">
												<div class="wpo-blog-sidebar">
													<div class="widget profile-widget">
														<div class="profile-img">
															<img src="${pageContext.request.contextPath }/DownLoadController/download/?filename=${sessionScope.user.userImg}" alt=""  id="img_driver">
														</div>
														<div class="pro-social">
															<ul>
																<li><button type="button" class="btn btn-block btn-success " onclick="driverUpload();"><i class="fa fa-cloud-upload"></i> 更换头像</button>
																</li>


															</ul>
															<input type="file" id="input_upload_driver" style="display: none" name="userfile" accept="image/jpg, image/png, image/jpeg"  onChange="preview(this,'img_driver');">
														</div>
													</div>
												</div>
											</div>
										</form>
									</div>
									<div class="tab-pane fade" id="password">
										<div class="contact-content">
											<h2>修改密码</h2>
											<form method="post" action="${pageContext.request.contextPath}/userInfoController/changeUserPassword?userId=${sessionScope.user.userId}">

												<div class="contact-form">
													<div class="half-col">
														<lable>旧密码:</lable>
														<input type="password" name="password"  class="form-control" >
													</div>
													<div class="half-col">
														<lable>新密码:</lable>
														<input type="password" name="newPassword"  class="form-control" >
													</div>
													<div class="half-col">
														<lable>确认密码:</lable>
														<input type="password" name="checkPassword"  class="form-control" >
													</div>
													<div class="submit-btn-wrapper">
														<input type="submit" class="btn btn-success btn-lg btn-block" name=""  value="修改" />

													</div>
												</div>
											</form>
										</div>

									</div>
									<div class="tab-pane fade" id="shop">
										<table class="table">
											<thead>
											<tr>
												<th>房间类型</th>
												<th>价格</th>
												<th>订单状态</th>
												<th>预约时间</th>
												<th>操作</th>
											</tr>
											</thead>
											<tbody id="userEngage">

											</tbody>
										</table>

									</div>
								</div>

							</div>
						</div>
						<div class="col col-md-4 col-md-pull-8">
							<div class="service-sidebar">
								<div class="widget service-list-widget">
									<h3>个人中心</h3>
									<ul id="myTab">
										<li class="active"><a href="#myself" data-toggle="tab">个人资料</a></li>
										<li><a href="#password" data-toggle="tab">修改密码</a></li>
										<li><a href="#shop" data-toggle="tab">个人订单</a></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<!-- end row -->
				</div>
				<!-- end container -->
			</section>
			<!-- end service-single-section -->

			<!-- start wpo-site-footer -->
			<footer class="wpo-site-footer">
				<div class="wpo-upper-footer">
					<div class="wpo-footer-top">
						<div class="container">
							<div class="row">
								<div class="col-lg-6 col-md-6 col-sm-6 col-12 custom-grid">
									<div class="logo widget-title">
										<img src="${pageContext.request.contextPath}/images/logo.png" alt="blog">
									</div>
								</div>
								<div class="col-lg-6 col-md-6 col-sm-6 col-12 custom-grid">
									<ul>
										<li><a href="#"><i class="ti-facebook"></i></a></li>
										<li><a href="#"><i class="ti-twitter-alt"></i></a></li>
										<li><a href="#"><i class="ti-instagram"></i></a></li>
										<li><a href="#"><i class="ti-google"></i></a></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<div class="footer-middle">
						<div class="container">
							<div class="row">
								<div class="col col-lg-3 col-md-3 col-sm-6">
									<div class="widget market-widget wpo-service-link-widget">
										<div class="widget-title">
											<h3>Contact </h3>
										</div>
										<p>online store with lots of cool and exclusive features</p>
										<div class="contact-ft">
											<ul>
												<li><i class="fi ti-location-pin"></i>28 Street, New York City, USA</li>
												<li><i class="fi ti-mobile"></i>+000123456789</li>
												<li><i class="fi flaticon-email"></i>Hastium@gmail.com</li>
											</ul>
										</div>
									</div>
								</div>
								<div class="col col-lg-3 col-md-3 col-sm-6">
									<div class="widget link-widget resource-widget">
										<div class="widget-title">
											<h3>Destination</h3>
										</div>
										<div class="news-wrap">
											<div class="news-img">
												<img src="${pageContext.request.contextPath}/images/footer/img-1.jpg" alt="">
											</div>
											<div class="news-text">
												<h3>Paris, France</h3>
												<span>11 Jun 2020 - 22 Jun 2020</span>
												<h2>$835</h2>
											</div>
										</div>
										<div class="news-wrap">
											<div class="news-img">
												<img src="${pageContext.request.contextPath}/images/footer/img-2.jpg" alt="">
											</div>
											<div class="news-text">
												<h3>San Francisco</h3>
												<span>11 Jun 2020 - 22 Jun 2020</span>
												<h2>$835</h2>
											</div>
										</div>
									</div>
								</div>
								<div class="col col-lg-3 col-md-3 col-sm-6">
									<div class="widget link-widget">
										<div class="widget-title">
											<h3>Useful Links</h3>
										</div>
										<ul>
											<li><a href="room.jsp">Our Offers</a></li>
											<li><a href="service.jsp">How Spread</a></li>
											<li><a href="userCenter.jsp">Our Event</a></li>
										</ul>
									</div>
								</div>
								<div class="col col-lg-3 col-md-3 col-sm-6">
									<div class="widget newsletter-widget">
										<div class="widget-title">
											<h3>Newsletter</h3>
										</div>
										<form>
											<div class="input-1">
												<input type="email" class="form-control" placeholder="Email Address *" required="">
											</div>
											<div class="submit clearfix">
												<button type="submit">subscribe<i class="ti-angle-right"></i></button>
											</div>
										</form>
									</div>
								</div>
							</div>
						</div>
						<!-- end container -->
					</div>
				</div>

				<div class="wpo-lower-footer">
					<div class="container">
						<div class="row">
							<div class="col col-md-6 col-sm-6">
								<div class="term">
									<ul>
										<li><a href="#">Privecy Policy</a></li>
										<li><a href="#">Terms & Condition</a></li>
										<li><a href="#">Cookies</a></li>
									</ul>
								</div>
							</div>
							<div class="col col-md-6 col-sm-6">
								<p class="copyright">Copyright &copy; 2020.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
							</div>
						</div>
					</div>
				</div>
			</footer>
			<!-- end wpo-site-footer -->
		</div>

		<!-- All JavaScript files
    ================================================== -->
		<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
		<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
		<script src="${pageContext.request.contextPath}/js/owl.carousel.min.js"></script>

		<!-- Plugins for this template -->
		<script src="${pageContext.request.contextPath}/js/jquery-plugin-collection.js"></script>

		<script src="${pageContext.request.contextPath}/js/bootstrap-datepicker.min.js"></script>

		<!-- Custom script for this template -->
		<script src="${pageContext.request.contextPath}/js/script.js"></script>
		<script>
			/**
			 * 文件上传
			 */
			function driverUpload() {
				$('#input_upload_driver').click(); // 模拟文件上传按钮点击操作
			}

			/**
			 * 缩略图预览
			 * @param file
			 * @param container
			 */
			var preview = function(file, container){
				//缩略图类定义
				var Picture  = function(file, container){
					var height = 0,
							width  = 0,
							ext    = '',
							size   = 0,
							name   = '',
							path   =  '';
					var self   = this;
					if(file){
						name = file.value;
						if(window.navigator.userAgent.indexOf("MSIE")>=1){
							file.select();
							path = document.selection.createRange().text;
						}else {
							if(file.files){
								// path =  file.files.item(0).getAsDataURL(); // firefox7.0之后该方法弃用了，用下面那个
								path = window.URL.createObjectURL(file.files[0]);
							}else{
								path = file.value;
							}
						}
					}else{
						throw '无效的文件';
					}
					ext = name.substr(name.lastIndexOf("."), name.length);
					if(container.tagName.toLowerCase() != 'img'){
						throw '不是一个有效的图片容器';
						container.visibility = 'hidden';
					}
					container.src = path;
					container.alt = name;
					container.style.visibility = 'visible';
					height = container.height;
					width  = container.width;
					size   = container.fileSize;
					this.get = function(name){
						return self[name];
					};
					this.isValid = function(){
						if(allowExt.indexOf(self.ext) !== -1){
							throw '不允许上传该文件类型';
							return false;
						}
					}
				};

				try{
					var pic =  new Picture(file, document.getElementById('' + container));
				}catch(e){
					alert(e);
				}
			};
		</script>
	</body>
<script>
	$(function(){
		//发送ajax请求 获取其他房间
		$.ajax({
			url:"${pageContext.request.contextPath}/EngageController/getEngage",
			type:"GET",
			data:{userId:$("#userId").text()},
			dataType:"json",
			success:function(data){
				for(var i=0;i<data.length;i++){
					var status="";
					if(data[i].status==0){
						status="<span class='label label-primary label-mini'>已取消</span>";
					}else if(data[i].status==1){
						status="<span class='label label-primary label-mini'>已预约</span>";
					}else{
						status="<span class='label label-success label-mini'>已同意</span>";
					}
					$("#userEngage").append("<tr>\n" +
							"\t\t\t\t\t\t\t\t\t\t\t\t<td style=\"line-height: 72.8px;\">"+data[i].roomType.rtName+"</td>\n" +
							"\t\t\t\t\t\t\t\t\t\t\t\t<td style=\"line-height: 72.8px;\">"+data[i].roomType.rtPrice+"</td>\n" +
							"\t\t\t\t\t\t\t\t\t\t\t\t<td style=\"line-height: 72.8px;\">"+status+"</td>\n" +
							"\t\t\t\t\t\t\t\t\t\t\t\t<td style=\"line-height: 72.8px;\">"+data[i].beginTime+"</td>\n" +
							"\t\t\t\t\t\t\t\t\t\t\t\t<td>\n" +
							"                      <a href=\"javascript:delFun("+data[i].user.userId +") \"><button class=\"btn btn-danger btn-xs\" style=\"margin-top: 20px;\">取消订单</button></a>\r\n" +
							"\t\t\t\t\t\t\t\t\t\t\t\t</td>\n" +
							"\t\t\t\t\t\t\t\t\t\t\t</tr>")
				}

			}
		})
	})
	function delFun(getUserId) {
		var flag = confirm("是否确认取消订单");
		if (flag) {
			//发送ajax请求
			$.ajax({
				url:"${pageContext.request.contextPath}/EngageController/updateUserEngage",
				type:"GET",
				data:{userId:getUserId},
				dataType:"json",
			})
		}
	}
</script>
</html>